<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('表格数据')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="col-sm-12 search-collapse">
        <form id="cxselect-form">
            <div class="select-list">
                <ul id="element">
                    <li>
                        <label>任务名称：</label>
                        <input type="text" name="taskName"/>
                    </li>
                    <li>
                        <label style="width: 80px">任务类型:</label>
                        <select class="type" data-none-selected-text="请选择" multiple>
                            <option value="">2018</option>
                            <option value="0">2019</option>
                            <option value="1">2020</option>
                            <option value="2">2021</option>
                            <option value="3">2022</option>
                        </select>
                    </li>
                    <li>
                        <label style="width: 80px"> 任务年限：</label>
                        <select class="router" data-none-selected-text="请选择" multiple>
                            <option value="">2018</option>
                            <option value="0">2019</option>
                            <option value="1">2020</option>
                            <option value="2">2021</option>
                            <option value="3">2022</option>
                        </select>
                    </li>
                    <li>
                        <label style="width: 80px"> 状态：</label>
                        <select class="router" data-none-selected-text="请选择" multiple>
                            <option value="">2018</option>
                            <option value="0">2019</option>
                            <option value="1">2020</option>
                            <option value="2">2021</option>
                            <option value="3">2022</option>
                        </select>
                    </li>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('cxselect-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-3 col-lg-3 col-md-3 select-table table-striped" style="display: inline-block;width: 10%">
            <div class="ui-layout-content">
                <div class="box box-main">
                    <div id="executor">

                    </div>
                    <div class="ui-layout-content">
                        <div id="tree" class="ztree"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 col-lg-9 col-md-9 select-table table-striped" style="display: inline-block;width: 90%">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<script th:inline="javascript">
    var prefix = ctx + "demo/table";
    var datas1 = [[${@dict.getType('sys_task_type')}]];
    var datas2 = [[${@dict.getType('sys_audit_method')}]];
    var datas3 = [[${@dict.getType('sys_task_status')}]];

    //任务执行人
    var executor=[]
    var enclosure=[]


    function queryDeptTree() {
        var url = ctx + "gs/company/selectExecutor";
        var options1 = {
            url: url,
            expandLevel: 2,
            onClick:zOnClick
        };
        function zOnClick(event, treeId, treeNode) {
            var node=0
            if (executor.length<1) {
                executor.push(treeNode.id)
                $("#executor").append("<span style='margin: 0px 5px'>"+treeNode.name+"</span>")
            }else{
                for (var i=0;i<executor.length;i++){
                    if (treeNode.id!=executor[i]){
                        node++
                    }
                }
                if (node==executor.length){
                    executor.push(treeNode.id)
                    $("#executor").append(treeNode.name)
                }
            }
            console.info(executor)
        }
        $.tree.init(options1);
    }

    $(function() {
        queryDeptTree()
        var options = {
            url: prefix + "/list2",
            showFooter: true,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            footerStyle: footerStyle,
            columns: [{
                checkbox: true
            },
                {
                    field : 'taskId',
                    title : '任务序号',

                },
                {
                    field : 'taskName',
                    title : '任务名称'
                },
                {
                    field : 'reportName',
                    title : '报表姓名'
                },
                {
                    field : 'taskTime',
                    title : '任务时限',

                },
                {
                    field : 'taskType',
                    title : '任务类型',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(datas1, value);
                    }
                },
                {
                    field : 'taskFile',
                    title : '任务附件',
                },
                {
                    field : 'taskExecutor',
                    title : '任务执行人',
                },
                {
                    field : 'examineMethod',
                    title : '审核方式',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(datas2, value);
                    }
                },
                {
                    field: 'status',
                    title: '任务状态',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(datas3, value);
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="#"  onclick="edit()"><i class="fa fa-edit"></i>查看</a> ')
                        actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>催一下</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>退回</a>');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

    function edit(){
        let url = prefix + "/footer3edit";
        $.modal.openFull("审核", url);
    }

    function footerStyle(column) {
        return {
//         	    userBalance: {
//         	        classes: 'class'
//         	    },
            userBalance: {
                css: { color: 'red', 'font-weight': 'normal' }
            }
        }[column.field]
    }
</script>
</body>
</html>